<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
<style>
body, html {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background: url('../ast/photo/admin.png') no-repeat center center/cover;
}

.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.login-box {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    color: #fff;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: none;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.login-button {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #3498db;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #2980b9;
}

.links a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
}
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <h2 style="color: blueviolet;">登录</h2>
            <input type="text" placeholder="用户名" id="username">
            <input type="password" placeholder="密码" id="password">
            <button onclick="fetchnow();" class="login-button">登录</button>
        </div>
    </div>
</body>
</html>
<script>
  function fetchnow(){
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    fetch('ht/login.php?username='+username+'&password='+password)
    .then(response => response.json())
    .then(data => {
      if(data.status === 'success'){
        window.location = "index.php";
        sessionStorage.setItem("3ecmb4d07a-be48f9", '7dcc@%#fe6792');
      }else{
        alert("用户名或密码错误");
      }
    })
  }
</script>